<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随效果</title>
    <link rel="stylesheet" href="./css/style.min.css">
</head>

<body>
    <div class="img-wrap flex rcs">
        <div class="img-item-wrap">
            <img src="./img/img1.jpg" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img2.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img3.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img4.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img1.jpg" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img2.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img3.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img4.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img1.jpg" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img2.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img3.webp" alt="" class="img-item" />
        </div>
        <div class="img-item-wrap">
            <img src="./img/img4.webp" alt="" class="img-item" />
        </div>
        <div class="pointer-wrap"></div>
    </div>
    <script>
    const imgs = document.querySelectorAll('.img-wrap img');
    const pointer = document.querySelector('.pointer-wrap')
    
    for (const img of imgs) {
        img.onmouseenter = async () => {
            settingParams(img);
        };
    }

    settingParams(imgs[0]);

    function settingParams(img) {
        const w = img.offsetWidth;
        const h = img.offsetHeight;
        const x = img.offsetLeft;
        const y = img.offsetTop;
        pointer.style.setProperty('--x', x + 'px');
        pointer.style.setProperty('--y', y + 'px');
        pointer.style.setProperty('--w', w + 'px');
        pointer.style.setProperty('--h', h + 'px');
    }
    </script>
</body>

</html>